<template>
  <div :class="wrapClasses" v-if="value">
    <slot>
      <div
        :class="['inline', animate]"
        :style="{width: WD, height: HT}">
      </div>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'Loading',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    fullScreen: {
      type: Boolean,
      default: false
    },
    animate: {
      type: String,
      default: 'loading'
    },
    inline: {
      type: Boolean,
      default: true
    },
    size: {
      type: [Number, String],
      default: 14
    }
  },
  data () {
    return {

    }
  },
  computed: {
    wrapClasses () {
      return [
        {
          'sh-loading': this.animate === 'loading',
          'fullScreen': this.fullScreen,
          'inline': this.inline
        }
      ]
    },
    WD () {
      return typeof size === 'string'
        ? this.size
        : this.size + 'px'
    },
    HT () {
      return typeof size === 'string'
        ? this.size
        : this.size + 'px'
    }
  }
}
</script>
